<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title th:text="${title}"></title>
    <link rel="stylesheet" th:href="@{https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css}" />
    <script charset="UTF-8" type="text/javascript" th:src="@{/static/js/jquery/jquery.min.js}"></script>
    <script charset="UTF-8" type="text/javascript" th:src="@{https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js}"></script>
    <script charset="UTF-8" type="text/javascript" th:src="@{/static/js/aliplayercomponents-1.0.5.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.goeasy.io/goeasy-1.0.3.js}"></script>
</head>
<style>
    .prism-player {
       margin:0;
    }
    body{
        background: url("/static/image/lyg/直播背景图.png");
    }
	#navigation_bar{
	    margin:0;
        width: 100%;
        height: 60px;
        background-color: #282728;
    }
    #back_course{
        width: 100px;
        height: 30px;
		background-color: #333233;
        padding-top: 10px;
    }
    #a_back_course{
        text-decoration: none;
        color: #615f61;
        margin-left: 10px;
    }
</style>
<!--+1-->
<style type="text/css">
    .talk_con{
        float: right;
        width:400px;
        height:800px;
        border:1px solid #666;
        margin:50px auto 0;
        background:#84c1FF;
    }
    .talk_show{
        width:370px;
        height:700px;
        border:1px solid #666;
        background:#fff;
        margin:10px auto 0;
        /*overflow:auto;*/
        overflow-x:hidden;
        overflow-y:auto;
    }

    .talk_input{
        width:370px;

        margin:10px auto 0;
    }
    .whotalk{
        width:80px;
        height:30px;
        float:left;
        outline:none;
    }
    .talk_word{
        width:370px;
        height:26px;
        padding:0px;
        float:left;
        margin-left:0px;
        outline:none;
        text-indent:10px;
    }
    .talk_sub{
        width:56px;
        height:30px;
        float:left;

        margin-left:0px;
    }
    .atalk{
        margin:10px;
    }
    .atalk span{
        /*background:#0181cc;*/
        color:black;
        padding:5px 10px;
        border-radius:10px;
    }
    .atalk div{
        width: 320px;
        word-wrap:break-word;
        display:inline-block;

        background:#84c1FF;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }
    .btalk{
        margin:10px;
        text-align:right;
    }

    .btalk div{
        width: 320px;
        /*自动换行*/
        word-wrap:break-word;
        display:inline-block;
        background:#ef8201;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }
</style>
<body>
<div style="float: left;width: 600px;">
    <div id="navigation_bar">
        <input th:type="hidden" th:value="${pullUrlMap['flvUrlSD']}" id="flvUrlSD">
        <input th:type="hidden" th:value="${pullUrlMap['flvUrlHD']}" id="flvUrlHD">
        <input th:type="hidden" th:value="${pullUrlMap['flvUrlUD']}" id="flvUrlUD">
        <div id="back_course">
            <a id="a_back_course">返回课程</a>
        </div>
    </div>
    <div class="prism-player" id="J_prismPlayer" ></div>
</div>

<!--右边-->
<div class="talk_con">
    <input  type="hidden" th:value="${user.getUserName()}" id="username">
    <input  type="hidden" th:value="${id}" id="roomid">
    <div class="talk_show" id="words">
    </div>

    <div class="talk_input">
        <input type="text" class="talk_word" id="talkwords">
        <input type="button" value="发送" class="talk_sub" id="talksub">
    </div>
    <br/>
</div>

</body>
<script>
    var player=new Aliplayer({
        id:'J_prismPlayer',
        source:JSON.stringify(
            {
                "标准":$("#flvUrlSD").val(),
                "高清":$("#flvUrlHD").val(),
                "超清":$("#flvUrlUD").val()
            }),
        width:'1500px',
        height:'800px',
        videoWidth:"100%",
        videoHeight:"100%",
        autoplay:true,     //是否自动播放
        isLive:true,        //是不是直播
        controlBarVisibility: 'click',    /* 控制面板的实现，'click':点击出现，'hover：'浮动出现,'always':一直在*/
        showBarTime: '10000',             /* 隐藏状态栏之前必须等待的时间段，设置为10,000毫秒。*/
        components: [{
            name: 'QualityComponent',
            type: AliPlayerComponent.QualityComponent
        }]
    }, function(player) {
        console.log("The player is created");
        /* 注册播放器加载的源，查询视频的分辨率，调用分辨率组件，然后调用setCurrentQuality方法设置分辨率。 */
        player.on('sourceloaded', function (params) {
            var paramData = params.paramData;
            var desc = paramData.desc;
            var definition = paramData.definition;
            player.getComponent('QualityComponent').setCurrentQuality(desc, definition);
        })
    });
</script>
<!--+1-->
<script type="text/javascript">
    var Words = document.getElementById("words");
    var Who = document.getElementById("who");
    var TalkWords = document.getElementById("talkwords");
    var TalkSub = document.getElementById("talksub");
    var goEasy = new GoEasy({
        host:'hangzhou.goeasy.io',//应用所在的区域地址，杭州：hangzhou.goeasy.io，新加坡：singapore.goeasy.io
        appkey: "BC-7aa730f238184e2eb8e4dcbd087e10e0",//替换为您的应用appkey
        userId: "u2",
        userData: "男，年龄2",
        forceTLS:false, //如果需要使用HTTPS/WSS，请设置为true，默认为false
        onConnected: function() {
            console.log('连接成功！')
        },
        onDisconnected: function() {
            console.log('连接断开！')
        },
        onConnectFailed: function(error) {
            console.log('连接失败或错误！')
        }
    });
    //订阅c1，接受消息
    goEasy.subscribe({
        channel: $('#roomid').val(),//替换为您自己的channel
        onMessage: function (message) {
            var ss=message.content;//获得消息主体
            var json = JSON.parse(ss);//将json字符串转json对象
            var str =  '<div class="atalk">'+'<span>' + json.user+'：</span>'+'<div>' + json.txt +'</div></div>';
            Words.innerHTML = Words.innerHTML + str;
            //实现混动条一直到最底部
            var oWords = document.getElementById('words');
            oWords.scrollTop = oWords.scrollHeight;
        }
    });

    // //发送消息
    // goEasy.publish({
    //     channel: "my_channel", //替换为您自己的channel
    //     message: "Hello, GoEasy!" //替换为您想要发送的消息内容
    // });


    //点击发送消息
    $("#talksub").click(function () {
        //定义空字符串
        var str = "";
        if(TalkWords.value == ""){
            // 消息为空时弹窗
            alert("发送的消息不能为空");
            return;
        }
        else{
            str = '<div class="btalk"><div> ' + $('#talkwords').val() +'</div></div>' ;
        }

        // var msg=$("#talkwords").val();

        var jsonobj={"user":$("#username").val(),"txt":$("#talkwords").val()};//json对象
        var msg= JSON.stringify(jsonobj);//将json对象转为json字符串
        goEasy.publish({
            channel: $('#roomid').val(), //替换为您自己的channel
            message: msg //替换为您想要发送的消息内容
        });
        //对话框填充文字
        // Words.innerHTML = Words.innerHTML + str;
        //清空输入框文字
        document.getElementById("talkwords").value='';

    });
    function onGetMessage(context)
    {
        words.innerHTML+=context;
        msg_end.scrollIntoView();
    }

</script>

</html>